<template>
<div id="box">
    <search></search>
    <navigation></navigation>
    <advertising></advertising>
    <merchants></merchants>
    <!-- <el-drawer
        size="100%"
        close-on-press-escape
        :destroy-on-close="true"
        :visible.sync="drawer"
        direction="btt"
        :with-header="false">
        <merchant :shopId="merchantId" @close="close"></merchant>
    </el-drawer> -->
</div>
</template>
<script>
    import search from './home-searchBar.vue'
    import navigation from './nav.vue'
    import advertising from './advertising.vue'
    import merchants from './merchants.vue'
    import merchant from './merchant.vue'
    import menuCom from './menuCom.vue'
    
export default{
    components:{
        search,navigation,advertising,merchants,menuCom,merchant
    },
    data(){
        return {
            merchantId:null,
            drawer: false,
        }
    },
    methods:{
        toMerchant(id){
            this.merchantId = id
            this.drawer = true
        },
        close(){
            this.drawer=false
        }
    }
}
</script>
<style lang='less' scoped>
    search{
        position: fixed;
        top: 0;
    }

    
    
    
    

</style>